<template>
  <div>
    
    <el-card>
      <div style="font-size: 26px; font-weight: 800; text-align: center;">
        模拟考试
      </div>
      <el-row class="tit" style="margin: 15px 0;">
        <el-col span="12">
          考试人：张三
        </el-col>
        <el-col span="12" style="text-align: right;">
          考试时长：60分钟
        </el-col>
      </el-row>
      <div v-for="(item,index) in tableData" class="item">
        <div class="tit">
          {{ index+1 }}、 {{ item.question}}
        </div>
        <el-row class="info">
          <el-col span="6">
            <el-radio v-model="form.radio[index]" label="1">A、{{ item.A }}</el-radio>
          </el-col>
          <el-col span="6">
            <el-radio v-model="form.radio[index]" label="2">B、{{ item.B }}</el-radio>
          </el-col>
          <el-col span="6">
            <el-radio v-model="form.radio[index]" label="3">C、{{ item.B }}</el-radio>
          </el-col>
          <el-col span="6">
            <el-radio v-model="form.radio[index]" label="4">D、{{ item.D }}</el-radio>
          </el-col>
        </el-row>
      </div>
      
      <div class="sub">
        <el-button  type="primary" >提交</el-button>
      </div>
    </el-card>
   
  </div>
</template>

<script>
import API from '../../utils/request'
const url = "/api/category/"

export default {
  name: "Category",
  data() {
    return {
      fileList: [],
      options: [],
      text: '',
      user: {},
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      entity: {},
      total: 0,
      dialogFormVisible: false,
      form:{
        radio:[]
      }
    };
  },
  created() {
    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    this.$emit('user', this.user);
    this.load()
  },
  methods: {
    fileSuccessUpload(res) {
      this.entity.file = "http://localhost:9999/files/" + res.data;
      this.fileList = [res.data]
      console.log(res)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    load() {
      //  API.get(url + "/page", {
      //     params: {
      //       pageNum: this.pageNum,
      //       pageSize: this.pageSize,
      //       name: this.text
      //     }
      //  }).then(res => {
      //     this.tableData = res.data.records || []
      //     this.total = res.data.total
      //  })
      this.tableData =[
            {
              "question": "微积分中，函数f(x) = x^2的导数是：",
              "A": "2x",
              "B": "x^2",
              "C": "2",
              "D": "x",
              "correct_answer": "A"
          },
          {
              "question": "一个三角形的两边长分别为3和4，且这两边夹角为60度，则该三角形的面积为：",
              "A": "3√3",
              "B": "6",
              "C": "4√3",
              "D": "12",
              "correct_answer": "A"
          },
          {
              "question": "等差数列{an}中，a1 = 2，公差d = -3，则第5项a5 = ？",
              "A": "-13",
              "B": "-7",
              "C": "7",
              "D": "13",
              "correct_answer": "A"
          },
          {
              "question": "一元二次方程x^2 - 4x + 4 = 0的解是：",
              "A": "x = 2（重根）",
              "B": "x = -2（重根）",
              "C": "x = 2, x = -2",
              "D": "无解",
              "correct_answer": "A"
          },
          {
              "question": "圆x^2 + y^2 = 9的圆心坐标和半径分别是：",
              "A": "(0,0), 3",
              "B": "(3,3), √2",
              "C": "(0,9), 1",
              "D": "(-3,-3), 3√2",
              "correct_answer": "A"
          }
      ]
    },
    add() {
      this.entity = {}
      this.fileList = []
      this.dialogFormVisible = true
    },
    edit(obj) {
      this.entity = JSON.parse(JSON.stringify(obj))
      this.fileList = []
      this.dialogFormVisible = true
    },
    save() {
      if (!this.entity.id) {
        API.post(url, this.entity).then(res => {
           if (res.code === '0') {
             this.$message({
               type: "success",
               message: "操作成功"
             })
           } else {
             this.$message({
               type: "error",
               message: res.msg
             })
           }
           this.load()
           this.dialogFormVisible = false
        })
      } else {
        API.put(url, this.entity).then(res => {
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "操作成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load()
          this.dialogFormVisible = false
        })
      }
    },
    del(id) {
      API.delete(url + id).then(res => {
        this.$message({
          type: "success",
          message: "操作成功"
        })
        this.load()
      })
    }
  },
};
</script>

<style scoped >

.item{
  border-bottom: solid rgb(228, 223, 223) 1px;
  line-height: 60px;
  
}
.tit{
  font-weight: 900;
}

.sub{
  text-align: center;
  margin-top: 20px;
}
</style>
